<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item>
                    <el-input
                            placeholder="请输入课程名称"
                            v-model="searchInfo.courseName"
                            clearable
                            size="mini"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="status" v-if="searchInfo.currentRoleId!==4">
                    <el-select
                            v-model="searchInfo.courseStatus"
                            placeholder="请选择审批状态"
                            clearable
                            size="mini"
                    >
                        <el-option
                                v-for="item in auditOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" type="primary" size="mini"
                    >搜 索
                    </el-button
                    >
                </el-form-item>
                <el-form-item>
                    <el-button @click="openDialog('add')" size="mini"
                               v-if="btns&&btns.includes('add')&&(searchInfo.currentRoleId===3||searchInfo.currentRoleId===4)">
                        新 增
                    </el-button>
                    <el-button @click="batchAddCourse()" size="mini" type="success" icon="el-icon-document"
                               v-if="btns&&btns.includes('add')&&searchInfo.currentRoleId===4">
                        批量添加课程库
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" @selection-change="getValue" style="width: 100%;margin-bottom: 10px;" border>
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column prop="courseName" label="课程名称" align="center">
            </el-table-column>
            <el-table-column prop="courseClassify" label="课程分类" align="center">
                <template slot-scope="scope">
                    {{ filterCourse(scope.row.courseClassify) }}
                </template>
            </el-table-column>
            <el-table-column
                    prop="courseCategoryName"
                    label="课程类目"
                    align="center"
            >
            </el-table-column>
            <!--            <el-table-column prop="courseLevel" label="课程级别" align="center" width="80px">-->
            <!--                <template slot-scope="scope">-->
            <!--                    {{ filterLevel(scope.row.courseLevel) }}-->
            <!--                </template>-->
            <!--            </el-table-column>-->
            <el-table-column prop="courseHourCount" label="课时" align="center" width="80px">
            </el-table-column>
            <el-table-column prop="courseHourPriceShow" label="单价" align="center" width="80px">
            </el-table-column>
            <el-table-column prop="courseCreateName" label="学校/机构名称" align="center"
                             v-if="searchInfo.currentRoleId===1||searchInfo.currentRoleId===2">
            </el-table-column>
            <el-table-column prop="orgNo" label="机构编号" align="center" v-if="searchInfo.currentRoleId!==4">
            </el-table-column>
            <el-table-column prop="courseStatus" label="审核状态" align="center" v-if="searchInfo.currentRoleId!==4">
                <template slot-scope="scope">
                    <span :class="fliterColor(scope.row.courseStatus)">{{filterStatus(scope.row.courseStatus)}}</span>
                    <span class="danger" style="cursor:pointer" v-if="scope.row.courseStatus===2"
                          @click="showFailReason(scope.row.courseId)"> 查看原因</span>
                </template>
            </el-table-column>
            <!--管理员/运营人员/教育局人员-->
            <el-table-column fixed="right" label="操作" align="center" width="200px"
                             v-if="searchInfo.currentRoleId===1||searchInfo.currentRoleId===2||searchInfo.currentRoleId===5">
                <!--查看按钮显示规则:配置权限与课程状态为审批中/审批成功-->
                <template slot-scope="scope">
                    <el-button
                            @click="viewArea(scope.row)"
                            size="mini"
                            type="primary"
                            icon="el-icon-view"
                            v-if="btns.includes('view')">查看
                    </el-button>
                    <el-button
                            @click="openAudit(scope.row)"
                            size="mini"
                            type="success"
                            icon="el-icon-document"
                            v-if="btns&&btns.includes('audit')&&scope.row.courseStatus===1"
                    >审核
                    </el-button>
                </template>
            </el-table-column>
            <!--学校人员-->
            <el-table-column fixed="right" label="操作" align="center" width="300px"
                             v-if="searchInfo.currentRoleId===4">
                <!--查看按钮显示规则:配置权限与课程状态为审批中/审批成功-->
                <template slot-scope="scope">
                    <el-button
                            @click="viewArea(scope.row)"
                            size="mini"
                            type="primary"
                            icon="el-icon-view"
                            v-if="btns.includes('view')">查看
                    </el-button>
                    <!--编辑按钮显示规则:配置权限与课程状态为待审批/审批失败 或(学校会查看到机构的课程，可以编辑自己课程)-->
                    <el-button
                            @click="editArea(scope.row)"
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="btns&&btns.includes('edit') && scope.row.courseStatus===3">
                        编辑
                    </el-button>
                    <!--                    <el-button-->
                    <!--                            @click="agreedTeachCourse(scope.row)"-->
                    <!--                            size="mini"-->
                    <!--                            type="success"-->
                    <!--                            icon="el-icon-document"-->
                    <!--                            v-if="(btns&&btns.includes('courseTeaching'))&&(scope.row.courseStatus===3)"-->
                    <!--                    >加入课程库-->
                    <!--                    </el-button>-->
                    <!--                    <el-button-->
                    <!--                            @click="applyCancel(scope.row.courseId,0)"-->
                    <!--                            size="mini"-->
                    <!--                            type="danger"-->
                    <!--                            icon="el-icon-document"-->
                    <!--                            v-if="scope.row.roleId===3"-->
                    <!--                    >拒绝-->
                    <!--                    </el-button>-->
                </template>
            </el-table-column>
            <!--培训机构人员-->
            <el-table-column fixed="right" label="操作" align="center" width="375px"
                             v-if="searchInfo.currentRoleId===3">
                <template slot-scope="scope">
                    <!--查看按钮显示规则:配置权限与课程状态为审批中/审批成功-->
                    <el-button
                            @click="viewArea(scope.row)"
                            size="mini"
                            type="primary"
                            icon="el-icon-view"
                            v-if="btns.includes('view')">查看
                    </el-button>
                    <!--编辑按钮显示规则:配置权限与课程状态为待审批/审批失败 或(学校会查看到机构的课程，可以编辑自己课程)-->
                    <el-button
                            @click="editArea(scope.row)"
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="(btns&&btns.includes('edit'))&&(scope.row.courseStatus===0||scope.row.courseStatus===2)">
                        编辑
                    </el-button>
                    <el-button
                            @click="deleteAreas(scope.row)"
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            v-if="(btns&&btns.includes('delete')) &&(scope.row.courseStatus===0||scope.row.courseStatus===2)"
                    >删除
                    </el-button>
                    <el-button
                            @click="commitAudit(scope.row)"
                            size="mini"
                            type="warning"
                            icon="el-icon-document"
                            v-if="((btns&&btns.includes('commitAudit')))&&(scope.row.courseStatus===0||scope.row.courseStatus===2)"
                    >提交审核
                    </el-button>
                    <!--                    <el-button-->
                    <!--                            @click="openApplyTeaching(scope.row)"-->
                    <!--                            size="mini"-->
                    <!--                            type="success"-->
                    <!--                            icon="el-icon-document"-->
                    <!--                            v-if="((btns&&btns.includes('courseTeaching')))&&scope.row.courseStatus===3"-->
                    <!--                    >申请授课-->
                    <!--                    </el-button>-->
                    <!--                    <el-button-->
                    <!--                            @click="agreedTeachCourse(scope.row)"-->
                    <!--                            size="mini"-->
                    <!--                            type="success"-->
                    <!--                            icon="el-icon-document"-->
                    <!--                            v-if="((btns&&btns.includes('courseTeaching')))&&(scope.row.courseStatus===3&&roleId===4)"-->
                    <!--                    >加入课程库-->
                    <!--                    </el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                :style="{ float: 'right', padding: '20px' }"
                :total="totalCount"
                @current-change="handlepageChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

        <el-dialog
                :before-close="closeDialog"
                :title="dialogTitle"
                :visible.sync="dialogFormVisible"
                class="dialogs"
        >
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="课程详情" name="first">
                    <el-form
                            :model="form"
                            :inline="true"
                            :rules="rules"
                            label-width="80px"
                            ref="areaForm"
                    >
                        <el-form-item label="封面" prop="courseImg" class="pics">
                            <el-upload
                                    :disabled="!isFlag"
                                    class="avatar-uploader"
                                    :action="`${path}/api-system/file/upload/course`"
                                    list-type="picture-card"
                                    :show-file-list="false"
                                    :before-upload="checkFile"
                                    :headers="{ Authorization: token }"
                                    :on-error="uploadError"
                                    :on-success="uploadSuccess"
                            >
                                <div class="header-background">
                                    <img v-if="form.courseImg" :src="form.courseImg" class="avatar" width="100%"
                                         height="100%"/>
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i></div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="课程名称" prop="courseName">
                            <el-input
                                    :disabled="!isFlag"
                                    autocomplete="off"
                                    v-model="form.courseName"
                                    size="small"
                                    placeholder="请输入课程名称"
                                    clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="课程分类" prop="courseClassify">
                            <el-select
                                    :disabled="!isFlag"
                                    v-model="form.courseClassify"
                                    placeholder="请选择课程分类"
                                    size="small"
                                    clearable
                            >
                                <el-option
                                        v-for="item in courseSortOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- :show-all-levels="false" -->
                        <el-form-item label="课程类目" prop="courseCategoryId">
                            <el-cascader
                                    :disabled="!isFlag"
                                    :class=" type==='edit' ? 'places' : '' "
                                    v-model="form.courseCategoryId"
                                    :options="options"
                                    :props="courseCategoryProp"
                                    @change="handles"
                                    size="small"
                                    :placeholder="form.courseCategoryName"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item label="适用年级" prop="courseGrade">
                            <el-select
                                    :disabled="!isFlag"
                                    v-model="form.courseGrade"
                                    multiple
                                    placeholder="请选择适用年级"
                                    size="small"
                                    clearable
                            >
                                <el-option
                                        v-for="item in gradesOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!--                        <el-form-item label="课程级别" prop="courseLevel">-->
                        <!--                            <el-select-->
                        <!--                                    :disabled="!isFlag"-->
                        <!--                                    v-model="form.courseLevel"-->
                        <!--                                    placeholder="请选择课程级别"-->
                        <!--                                    size="small"-->
                        <!--                                    clearable-->
                        <!--                            >-->
                        <!--                                <el-option-->
                        <!--                                        v-for="item in courseLevelOptions"-->
                        <!--                                        :key="item.value"-->
                        <!--                                        :label="item.label"-->
                        <!--                                        :value="item.value"-->
                        <!--                                >-->
                        <!--                                </el-option>-->
                        <!--                            </el-select>-->
                        <!--                        </el-form-item>-->
                        <el-form-item label="课时数" prop="courseHourCount">
                            <el-input
                                    :disabled="!isFlag"
                                    oninput="value=value.replace(/[^\d]/g,'')"
                                    autocomplete="off"
                                    v-model="form.courseHourCount"
                                    size="small"
                                    placeholder="请输入课时数"
                                    clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="课时单价" prop="courseHourPrice">
                            <el-input
                                    :disabled="!isFlag"
                                    oninput="value=value.replace(/[^0-9.]/g,'')"
                                    autocomplete="off"
                                    v-model="form.courseHourPriceShow"
                                    size="small"
                                    placeholder="请输入课时单价"
                                    clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                                label="是否包含教材/教具"
                                prop="goodsFlag"
                                class="item-label"
                        >
                            <el-select
                                    :disabled="!isFlag"
                                    v-model="form.goodsFlag"
                                    placeholder="请选择是否包含教材/教具"
                                    @change="handleMaterial"
                                    size="small"
                                    clearable
                            >
                                <el-option
                                        v-for="item in statusOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                                label="教材/教具名称"
                                prop="courseMaterialName  "
                                v-if="form.goodsFlag === 1"
                                class="item-label"
                        >
                            <el-select
                                    :disabled="!isFlag"
                                    v-model="form.goodsId"
                                    placeholder="请选择教材/教具"
                                    @change="handleGoods"
                                    size="small"
                                    clearable
                            >
                                <el-option
                                        v-for="item in goodsOptions"
                                        :key="item.goodsId"
                                        :label="item.goodsName"
                                        :value="item.goodsId"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                                label="教材/教具价格"
                                prop="goodsPriceShow"
                                v-if="form.goodsFlag === 1"
                                class="item-label"
                        >
                            <el-input
                                    :disabled="true"
                                    oninput="value=value.replace(/[^0-9.]/g,'')"
                                    autocomplete="off"
                                    v-model="form.goodsPriceShow"
                                    size="small"
                                    clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                                label="是否必须购买"
                                prop="requireBuyFlag"
                                v-if="form.goodsFlag === 1"
                                class="item-label"
                        >
                            <el-select
                                    :disabled="!isFlag"
                                    v-model="form.buyFlag"
                                    placeholder="是否必须购买"
                                    size="small"
                                    clearable
                            >
                                <el-option
                                        v-for="item in statusOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!--                        <el-form-item-->
                        <!--                                label="课程介绍"-->
                        <!--                                prop="courseIntroduce"-->
                        <!--                                class="pics"-->
                        <!--                        >-->
                        <!--                            <el-input-->
                        <!--                                    autocomplete="off"-->
                        <!--                                    v-model="form.courseIntroduce"-->
                        <!--                                    size="small"-->
                        <!--                                    :placeholder="isFlag?'请输入课程介绍':''"-->
                        <!--                                    clearable-->
                        <!--                                    type="textarea"-->
                        <!--                                    :autosize="{ minRows: 2, maxRows: 10}"-->
                        <!--                                    :disabled="!isFlag"-->
                        <!--                            ></el-input>-->
                        <!--                        </el-form-item>-->
                        <el-form-item
                                label="场地要求"
                                prop="courseSiteRequirements"
                                class="pics"
                        >
                            <el-input
                                    :disabled="!isFlag"
                                    label="场地要求"
                                    autocomplete="off"
                                    v-model="form.courseSiteRequirements"
                                    size="small"
                                    :placeholder="isFlag?'请输入场地要求':''"
                                    clearable
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 10}"
                            ></el-input>
                        </el-form-item>
                        <el-divider content-position="left">课程介绍</el-divider>
                        <quill-editor
                                :disabled="!isFlag"
                                style=" height: 100px;"
                                :options="editorOption"
                                @blur="onEditorBlur($event)"
                                @change="onEditorChange($event)"
                                @focus="onEditorFocus($event)"
                                ref="myQuillEditor"
                                v-model="form.courseIntroduce"

                        ></quill-editor>

                        <!--                        <el-upload class="avatar-uploader quill-img"-->
                        <!--                                   :action="`${path}/api-system/file/upload/course`"-->
                        <!--                                   :show-file-list="false"-->
                        <!--                                   :headers="{ Authorization: token }"-->
                        <!--                                   :on-success="quillImgSuccess"-->
                        <!--                                   :before-upload="checkFile">-->
                        <!--                        </el-upload>-->
                        <el-form-item label="" prop="introduceImgList" style="margin-top: 50px; width:900px" >
                            <!--编辑情况-->
                            <el-upload
                                    v-if="type!=='view'"
                                    :disabled="!isFlag"
                                    :on-remove="(file, fileList) => handleRemove(file, fileList)"
                                    :before-upload="checkFile"
                                    :action="`${path}/api-system/file/upload/course`"
                                    list-type="picture-card"
                                    :headers="{ Authorization: token,clientType: 'webApp' }"
                                    :on-error="uploadError"
                                    :file-list="introduceImgList"
                                    :on-success="(response, file, fileList) => introduceImgUploadSuccess(response, file, fileList)">

                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <div v-else>
                                <img v-for="item in introduceImgList" :src="item.url" class="avatar"
                                     style="width: 148px;height:148px;margin-right: 10px;"/>
                            </div>
                            <!--查看有数据情况-->
                        </el-form-item>

                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="课程目录" name="second">
                    <div class="contents">
                        <div class="addBtn" v-if="isFlag">
                            <el-button type="text" @click="doAdd">增加</el-button>
                        </div>

                        <el-form
                                :model="{ courseContentList }"
                                ref="ruleForm"
                                label-width="100px"
                        >
                            <div
                                    v-for="(item, index) in courseContentList"
                                    :key="index"
                                    class="con-list"
                            >
                                <el-form-item label="课节标题">
                                    <el-input v-model="item.lessonsTitle" :disabled="!isFlag"></el-input>
                                </el-form-item>
                                <el-form-item label="课节内容">
                                    <el-input
                                            :disabled="!isFlag"
                                            type="textarea"
                                            :autosize="{ minRows: 3, maxRows: 10}"
                                            placeholder="请输入课节内容"
                                            v-model="item.lessonsContent"
                                    >
                                    </el-input>
                                </el-form-item>
                                <el-divider></el-divider>
                                <el-button
                                        type="danger"
                                        size="small"
                                        class="delBtn"
                                        @click="doDel(index)"
                                        v-if="isFlag"
                                >删除
                                </el-button
                                >
                            </div>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div class="dialog-footer" slot="footer" style="margin-top:30px;">
                <el-button @click="closeDialog" size="mini">取 消</el-button>
                <el-button @click="enterDialog" type="primary" v-if="isFlag" size="mini">确 定</el-button>
            </div>
        </el-dialog>


        <!--审批弹出框-->
        <el-dialog title="审批信息" :visible.sync="auditDialogFormVisible"
                   class="dialogs">
            <el-form :model="auditForm" ref="auditForm">
                <el-form-item label="审批意见" prop="remarks" class="pics">
                    <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入审批意见"
                            v-model="auditForm.remarks">
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeAudiDialog" size="mini">取 消</el-button>
                <el-button @click="enterAudiDialog(2)" type="danger" size="mini">审核不通过</el-button>
                <el-button @click="enterAudiDialog(3)" type="primary" size="mini ">审核通过</el-button>
            </div>
        </el-dialog>

        <!-- 申请授课弹出框-->
        <el-dialog title="申请授课" :visible.sync="applyTeachingDialogFormVisible" :before-close="closeTeachingDialog"
                   class="dialogss">
            <template>
                <el-form :model="applyTeachingForm" label-width="100px" :inline=true ref="applyTeachingForm"
                         :rules="teachingRules">
                    <!--                    <el-form-item label="班级名称" prop="className">-->
                    <!--                        <el-input-->
                    <!--                                autocomplete="off"-->
                    <!--                                v-model="applyTeachingForm.className"-->
                    <!--                                size="small"-->
                    <!--                                placeholder="请输入课程名称"-->
                    <!--                                clearable-->
                    <!--                        ></el-input>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="授课教师" prop="teacherId">
                        <el-select v-model="applyTeachingForm.teacherId" filterable
                                   value-key="applyTeachingForm.teacherId"
                                   placeholder="请选择教师" size="small"
                                   :change="teacherChange(applyTeachingForm.teacherId)"
                                   clearable>
                            <el-option
                                    v-for="item in teacherListOptions"
                                    :key="item.teacherId"
                                    :label="item.teacherName"
                                    :value="item.teacherId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="授课学校" prop="schoolId">
                        <el-select v-model="applyTeachingForm.schoolId" filterable
                                   value-key="applyTeachingForm.schoolId"
                                   placeholder="请选择学校" size="small"
                                   :change="schoolChange(applyTeachingForm.schoolId)" clearable>
                            <el-option
                                    v-for="item in schoolListOptions"
                                    :key="item.schoolId"
                                    :label="item.schoolName"
                                    :value="item.schoolId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button @click="enterTeachingDialog" type="primary" size="mini">提 交</el-button>
                    </el-form-item>

                </el-form>
            </template>
            <template>
                <el-table :data="courseTeachingTableData" style="width: 100%;margin-bottom: 10px;" border>
                    <!--                    <el-table-column prop="className" label="班级名称" align="center"></el-table-column>-->
                    <el-table-column prop="teacherName" label="授课教师" align="center"></el-table-column>
                    <el-table-column prop="schoolName" label="授课学校" align="center" width="150px"></el-table-column>
                    <el-table-column prop="createTime" label="申请时间" align="center" width="160px"></el-table-column>
                    <el-table-column prop="status" label="申请状态" align="center">
                        <template slot-scope="scope">
                            <span>{{fliterTeachingStatus(scope.row.status)}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" align="center" width="150px">
                        <template slot-scope="scope" v-if="scope.row.status===0">
                            <el-button
                                    @click="applyCancel(scope.row.courseId,scope.row.teachingId)"
                                    size="mini"
                                    type="primary"
                                    icon="el-icon-view">取消申请
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-dialog>

        <!--审批失败弹出框-->
        <el-dialog title="审批失败原因" :visible.sync="auditMessageVisible" class="dialogs">
            <span>{{failMessage}}</span>
        </el-dialog>
    </div>
</template>

<script>
    // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
    import {mapGetters} from "vuex";
    import {
        addcourse,
        addCourseTeaching,
        agreeCourseBatchTeaching,
        agreedTeach,
        auditCourse,
        cancelCourseTeaching,
        courseDetail,
        courseList,
        courseTeachingList,
        deletecourse,
        editcourse,
        enableCourse,
        getAuditMessage,
        getCategory
    } from "@/api/course";
    import infoList from "@/components/mixins/infoList";
    import {simpleTeacherList} from "@/api/teacher";
    import {userSchoolList} from "@/api/account";
    import {simpleGoodsList} from "@/api/goods";

    export default {
        name: "course",
        mixins: [infoList],
        data() {
            return {
                failMessage: '',
                searchInfo: {courseName: '', courseStatus: ''},
                auditMessageVisible: false,
                selectValue: [],
                saveFlag: true,
                courseTeachingTableData: [],//授课列表
                teacherListOptions: [],
                schoolListOptions: [],
                introduceImgList: [],
                isFlag: false,
                roleId: 0,
                btns: [],
                activeName: "first",
                path: process.env.VUE_APP_BASE_API,
                value1: "",
                options: [],
                goodsOptions: [],
                auditOptions: [
                    {
                        value: '',
                        label: "全部",
                    },
                    {
                        value: 0,
                        label: "待审核",
                    },
                    {
                        value: 1,
                        label: "审核中",
                    },
                    {
                        value: 3,
                        label: "审核成功",
                    },
                    {
                        value: 2,
                        label: "审核失败",
                    }
                ],
                courseCategoryProp: {
                    value: "categoryId",
                    label: "categoryName",
                    children: "childList",
                },
                statusOptions: [
                    {
                        value: 0,
                        label: "否",
                    },
                    {
                        value: 1,
                        label: "是",
                    },
                ],
                courseSortOptions: [
                    {
                        value: 0,
                        label: "素质课",
                    },
                    {
                        value: 1,
                        label: "社团课",
                    },
                    {
                        value: 2,
                        label: "托管班",
                    },
                ],
                courseLevelOptions: [
                    {
                        value: 0,
                        label: "基础",
                    },
                    {
                        value: 1,
                        label: "进阶",
                    },
                    {
                        value: 2,
                        label: "高级",
                    },
                ],
                gradesOptions: [
                    {
                        value: 1,
                        label: "一年级",
                    },
                    {
                        value: 2,
                        label: "二年级",
                    },
                    {
                        value: 3,
                        label: "三年级",
                    },
                    {
                        value: 4,
                        label: "四年级",
                    },
                    {
                        value: 5,
                        label: "五年级",
                    },
                    {
                        value: 6,
                        label: "六年级",
                    },
                ],
                roleOptions: [
                    {
                        value: 0,
                        label: "机构",
                    },
                    {
                        value: 1,
                        label: "学校",
                    },
                    {
                        value: 2,
                        label: "教育局",
                    },
                    {
                        value: 3,
                        label: "管理员",
                    },
                ],
                listApi: courseList,
                dialogFormVisible: false,
                auditDialogFormVisible: false,
                applyTeachingDialogFormVisible: false,
                dialogTitle: "新增课程",
                form: {},
                auditForm: {
                    remarks: ''
                },
                applyTeachingForm: {
                    courseId: '',
                    className: '',
                    schoolName: '',
                    teacherId: '',
                    teacherName: '',
                    schoolId: '',
                },
                type: "",
                rules: {
                    courseName: [
                        {required: true, message: "请输入课程名称", trigger: "blur"},
                    ],
                    courseClassify: [
                        {required: true, message: "请选择课程分类", trigger: "blur"},
                    ],
                    courseCategoryId: [
                        {required: true, message: "请选择课程类目", trigger: "blur"},
                    ],
                    courseGrade: [
                        {required: true, message: "请选择适用年级", trigger: "blur"},
                    ],
                    courseLevel: [
                        {required: true, message: "请选择课程级别", trigger: "blur"},
                    ],
                    courseHourCount: [
                        {required: true, message: "请输入课时数", trigger: "blur"},
                    ],
                    courseHourPriceShow: [
                        {required: true, message: "请输入课单价", trigger: "blur"},
                    ]
                },
                teachingRules: {
                    teacherId: [{required: true, message: "请选择教师", trigger: "change"}],
                    schoolId: [{required: true, message: "请选择学校", trigger: "change"}],
                },
                courseContentList: [],
                editorOption: {
                    placeholder: '请输入课程介绍...',
                    theme: 'snow', // 主题
                    modules: {
                        toolbar: {
                            container: [
                                ['bold', 'italic', 'underline', 'strike'],    // 加粗，斜体，下划线，删除线
                                [{indent: '-1'}, {indent: '+1'}],     // 缩进
                                [{header: [1, 2, 3, 4, 5, 6, false]}],     // 几级标题
                                [{color: []}, {background: []}],     // 字体颜色，字体背景颜色
                                [{align: []}],    // 对齐方式
                                // ['image'],    // 上传图片
                                ['clean'],    // 清除字体样式
                            ],
                            handlers: {
                                image: function () {
                                    document.querySelector('.quill-img input').click()
                                }
                            }
                        }
                    },
                    // 图片上传的设置
                    // uploadConfig: {
                    //     action: '`${path}/api-system/file/upload/course`',  // 必填参数 图片上传地址
                    //     // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
                    //     // 你必须把返回的数据中所包含的图片地址 return 回去
                    //     res: (respnse) => {
                    //         return respnse.info
                    //     },
                    //     methods: 'POST',  // 可选参数 图片上传方式  默认为post
                    //     token: sessionStorage.token,  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
                    //     name: 'img',  // 可选参数 文件的参数名 默认为img
                    //     size: 500,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kb
                    //     accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可选参数 可上传的图片格式
                    //     // start: function (){}
                    //     start: () => {
                    //     },  // 可选参数 接收一个函数 开始上传数据时会触发
                    //     end: () => {
                    //     },  // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
                    //     success: () => {
                    //     },  // 可选参数 接收一个函数 上传数据成功时会触发
                    //     error: () => {
                    //     }  // 可选参数 接收一个函数 上传数据中断时会触发
                    // },
                    // 以下所有设置都和vue-quill-editor本身所对应
                    toolOptions: [],  // 可选参数  选择工具栏的需要哪些功能  默认是全部
                    handlers: {}  // 可选参数 重定义的事件，比如link等事件
                }
            };
        },
        computed: {
            ...mapGetters("user", ["userInfo", "token"]),
        },
        methods: {
            batchAddCourse() {
                if (this.selectValue.length === 0) {
                    this.$message({
                        type: "info",
                        message: "请勾选要添加的课程",
                    });
                } else {
                    this.$confirm("是否将已选的课程批量加入课程库?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(async () => {
                        const res = await agreeCourseBatchTeaching(this.selectValue);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "提交成功",
                                showClose: true,
                            });
                        }
                        this.getTableData();
                    })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "已取消删除",
                            });
                        });
                }
            },
            getValue(val) {
                this.selectValue = [];
                val.forEach((item) => {
                    this.selectValue.push(item.courseId);
                });
            },
            fliterTeachingStatus(val) {
                switch (val) {
                    case 0:
                        return '申请中'
                    case 1:
                        return '已完成'
                    case 2:
                        return '已取消'
                    default:
                        break;
                }
            },
            fliterColor(val) {
                switch (val) {
                    case 0:
                        return 'info'
                    case 1:
                        return 'warning'
                    case 2:
                        return 'danger'
                    case 3:
                        return 'success'
                    case 4:
                        return 'warning'
                    default:
                        break;
                }
            },
            filterStatus(val) {
                switch (val) {
                    case 0:
                        return '待审核'
                    case 1:
                        return '审核中'
                    case 2:
                        return '审核失败'
                    case 3:
                        return '审核成功'
                    case 4:
                        return '审核中'
                    default:
                        break;
                }
            },
            filterCourseGrade(val) {
                switch (val) {
                    case 1:
                        return '一年级'
                    case 2:
                        return '二年级'
                    case 3:
                        return '三年级'
                    case 4:
                        return '四年级'
                    case 5:
                        return '五年级'
                    case 6:
                        return '六年级'
                    default:
                        break;
                }
            }
            ,
            handles(val) {
                if (val === undefined) {
                    return;
                }
                let one = val[0];
                let tow = val[1];
                let three = val[2];
                let newCourseCategoryName = "";
                this.options.forEach((item) => {
                    //一级
                    if (one === item.categoryId) {
                        newCourseCategoryName = item.categoryName + "/"
                        item.childList.forEach((item1) => {
                            //二级
                            if (tow === item1.categoryId) {
                                newCourseCategoryName += item1.categoryName + "/"
                                item1.childList.forEach((item2) => {
                                    //三级
                                    if (three === item2.categoryId) {
                                        newCourseCategoryName += item2.categoryName

                                    }
                                });
                            }
                        });
                    }
                });
                this.form.courseCategoryName = newCourseCategoryName
            },
            doAdd() {
                this.courseContentList.push({
                    lessonsTitle: "",
                    lessonsContent: "",
                });
            },
            doDel(index) {
                this.courseContentList.splice(index, 1);
            },
            handleClick(tab, event) {
                // console.log(tab, event);
            },
            // 课程分类
            filterCourse(val) {
                switch (val) {
                    case 0:
                        return "素质课";
                    case 1:
                        return "社团课";
                    case 2:
                        return "托管班";
                    default:
                        break;
                }
            },
            //级别
            filterLevel(val) {
                switch (val) {
                    case 0:
                        return "基础";
                    case 1:
                        return "进阶";
                    case 2:
                        return "高级";
                    default:
                        break;
                }
            },
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1;
                this.pageSize = 10;
                this.getTableData();
            },
            initForm() {
                this.$refs.areaForm.resetFields();
                this.$refs.ruleForm.resetFields();
                this.form = {};
            },
            closeDialog() {
                this.initForm();
                this.dialogFormVisible = false;
                this.isFlag = false;
            },
            async openDialog(type) {
                switch (type) {
                    case "add":
                        this.dialogTitle = "新增课程";
                        this.isFlag = true;
                        break;
                    case "edit":
                        this.dialogTitle = "编辑课程";
                        this.isFlag = true;
                        break;
                    case "view":
                        this.dialogTitle = "查看课程";
                        break;
                    default:
                        break;
                }
                this.activeName = "first";
                this.type = type;
                this.dialogFormVisible = true;
                const goodsRes = await simpleGoodsList();
                this.goodsOptions = goodsRes.data;
            },
            schoolChange(val) {
                this.schoolListOptions.forEach((item) => {
                    if (item.schoolId === val) {
                        this.applyTeachingForm.schoolName = item.schoolName
                    }
                })
            },
            teacherChange(val) {
                this.teacherListOptions.forEach((item) => {
                    if (item.teacherId === val) {
                        this.applyTeachingForm.teacherName = item.teacherName
                    }
                })
            },
            //处理是否包含教具
            async handleMaterial(val) {
                if (val === 0) {
                    this.form.goodsId = '';
                    this.form.buyFlag = 0;
                }
                if (val === 1) {
                    //请求商品接口
                    if (this.form.goodsId === '0') {
                        this.form.goodsId = '';
                    }
                    const res = await simpleGoodsList();
                    this.goodsOptions = res.data;
                }
            },
            //处理选择的教具
            handleGoods(val) {
                this.form.goodsId = val;
                this.goodsOptions.forEach(i => {
                    if (val === i.goodsId) {
                        this.form.goodsPriceShow = i.goodsPrice;
                    }
                })
                this.$forceUpdate();
            },
            //申请授课-取消申请
            async applyCancel(courseId, teachingId) {
                this.$confirm("此操作将取消申请授课, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await cancelCourseTeaching(courseId, teachingId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "申请授课取消成功",
                                showClose: true,
                            });
                        }
                        //获取表格数据
                        if (teachingId === 0) {
                            //学校刷新列表
                            this.getTableData();
                        } else {
                            const listRes = await courseTeachingList(courseId)
                            this.courseTeachingTableData = listRes.data
                        }

                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消",
                        });
                    });
            },
            //获取教师
            async getTeacher(teacherId) {
                const res = await simpleTeacherList(teacherId)
                this.teacherListOptions = res.data
            },
            //获取学校
            async getSchool() {
                const res = await userSchoolList()
                this.schoolListOptions = res.data
            },
            //启用/停用
            async changeEnable(row) {
                const res = await enableCourse(row.courseId)
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "启用/停用成功",
                        showClose: true,
                    });
                }
                this.getTableData();
            },
            closeAudiDialog() {
                this.auditDialogFormVisible = false;
            },
            //查看失败原因
            async showFailReason(val) {
                this.failMessage = "";
                this.auditMessageVisible = true;
                let res = await getAuditMessage(val);
                this.failMessage = res.data;
            },

            //审核弹出框
            async openAudit(row) {
                this.auditForm = row
                this.auditDialogFormVisible = true;
            },
            //提交审核
            async commitAudit(row) {
                this.$confirm("此操作将提交审核, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await auditCourse({
                            courseId: row.courseId,
                            courseStatus: 1
                        });
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "提交成功",
                                showClose: true,
                            });
                        }
                        this.getTableData();
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });

            },
            //教育局审核
            async enterAudiDialog(type) {
                this.auditForm = Object.assign(this.auditForm, {courseStatus: type})
                const {courseId, remarks, courseStatus} = this.auditForm
                const res = await auditCourse({courseId, remarks, courseStatus});
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "提交成功",
                        showClose: true,
                    });
                }
                this.getTableData();
                this.auditDialogFormVisible = false;
            },
            closeTeachingDialog() {
                this.applyTeachingDialogFormVisible = false;
                this.courseTeachingTableData = [];
                this.applyTeachingForm = {
                    courseId: '',
                    className: '',
                    schoolName: '',
                    teacherId: '',
                    teacherName: '',
                    schoolId: '',
                }
            },
            //申请授课
            async openApplyTeaching(row) {
                this.applyTeachingForm.courseId = row.courseId
                this.applyTeachingDialogFormVisible = true;
                if (this.teacherListOptions.length === 0) {
                    this.getTeacher(0);
                }
                if (this.schoolListOptions.length === 0) {
                    this.getSchool(0);
                }
                //获取表格数据
                const res = await courseTeachingList(row.courseId)
                this.courseTeachingTableData = res.data
            },
            //同意授课
            async agreedTeachCourse(row) {
                this.$confirm("此操作将加入到课程库, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await agreedTeach(row.courseId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "提交成功",
                                showClose: true,
                            });
                        }
                        this.getTableData();
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });

            },

            async viewArea(row) {
                this.introduceImgList = [];
                const res = await courseDetail(row.courseId);
                this.form = res.data;
                this.courseContentList = res.data.courseContentList === null ? [] : res.data.courseContentList;
                let imageList = this.form.imageList;
                if (imageList) {
                    imageList.forEach((item) => {
                        this.introduceImgList.push({url: item});
                    })
                }
                this.openDialog("view");
            },
            async editArea(row) {
                this.introduceImgList = [];
                const res = await courseDetail(row.courseId);
                this.form = res.data;
                this.courseContentList = res.data.courseContentList === null ? [] : res.data.courseContentList;
                let imageList = this.form.imageList;
                if (imageList) {
                    imageList.forEach((item) => {
                        this.introduceImgList.push({url: item});
                    })
                }
                this.openDialog("edit");
            },
            async deleteAreas(row) {
                this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await deletecourse(row.courseId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
            async enterDialog() {
                this.$refs.areaForm.validate(async (valid) => {
                    if (valid) {
                        switch (this.type) {
                            case "add": {
                                this.form = Object.assign(this.form, {
                                    courseContentList: this.courseContentList
                                });
                                const res = await addcourse(this.form);
                                if (res.statusCode === 0) {
                                    this.$message({
                                        type: "success",
                                        message: "添加成功",
                                        showClose: true,
                                    });
                                }
                                this.getTableData();
                                this.closeDialog();
                            }

                                break;
                            case "edit": {
                                this.form = Object.assign(this.form, {
                                    courseContentList: this.courseContentList,
                                });
                                const res = await editcourse(this.form);
                                if (res.statusCode === 0) {
                                    this.$message({
                                        type: "success",
                                        message: "编辑成功",
                                        showClose: true,
                                    });
                                }
                                this.getTableData();
                                this.closeDialog();
                            }
                                break;
                            default: {
                                this.$message({
                                    type: "error",
                                    message: "未知操作",
                                    showClose: true,
                                });
                            }
                                break;
                        }
                    }
                });
            },
            //提交申请授课
            async enterTeachingDialog() {
                this.$refs.applyTeachingForm.validate(async (valid) => {
                    if (valid) {
                        const res = await addCourseTeaching(this.applyTeachingForm);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "添加成功",
                                showClose: true,
                            });
                            //获取表格数据
                            const res = await courseTeachingList(this.applyTeachingForm.courseId)
                            this.$refs.applyTeachingForm.resetFields();
                            this.courseTeachingTableData = res.data
                            this.applyTeachingForm = {
                                courseId: this.applyTeachingForm.courseId,
                                className: '',
                                schoolName: '',
                                teacherId: '',
                                teacherName: '',
                                schoolId: '',
                            }

                        } else {
                            this.$message({
                                type: "warning",
                                message: res.msg,
                            });
                        }
                    }
                })

            },
            //文件上传
            checkFile(file) {
                this.saveFlag = false;
                this.fullscreenLoading = true;
                const isJPG = file.type === "image/jpeg";
                const isPng = file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG && !isPng) {
                    this.$message.error("上传头像图片只能是 JPG或png 格式!");
                    this.fullscreenLoading = false;
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 2MB!");
                    this.fullscreenLoading = false;
                }
                return (isPng || isJPG) && isLt2M;
            },
            uploadSuccess(res) {
                this.fullscreenLoading = false;
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "上传成功",
                    });
                    this.saveFlag = true;
                    this.$set(this.form, 'courseImg', res.data);
                } else {
                    this.$message({
                        type: "warning",
                        message: res.msg,
                    });
                }
            },
            introduceImgUploadSuccess(response) {
                if (response.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "上传成功",
                    });
                    if (this.form.imageList === undefined) {
                        this.form.imageList = [];
                    }
                    this.form.imageList.push(response.data);
                }
            },
            handleRemove(file, fileList) {
                let imagArray = [];
                if (fileList.length > 0) {
                    fileList.forEach(function (value) {
                        let url = value.response === undefined ? value.url : value.response.data;
                        imagArray.push(url);
                    });
                }
                this.form.imageList = imagArray;
            },
            uploadError() {
                this.$message({
                    type: "error",
                    message: "上传失败",
                });
                this.saveFlag = true;
                this.fullscreenLoading = false;
            },
            onEditorBlur(e) {

            }, // 失去焦点事件
            onEditorFocus(e) {

            }, // 获得焦点事件
            onEditorChange(e) {

            },
            // 富文本编辑框图片上传
            // quillImgSuccess(res, file) {
            //     // 获取富文本组件实例
            //     let quill = this.$refs.myQuillEditor.quill;
            //     // 如果上传成功
            //     if (res.statusCode === 0) {
            //         // 获取光标所在位置
            //         let length = quill.getSelection().index;
            //         // 插入图片  res.data为服务器返回的图片地址
            //         quill.insertEmbed(length, 'image', res.data);// 这里的url是图片的访问路径不是真实物理路径
            //         // 调整光标到最后
            //         quill.setSelection(length + 1)
            //     } else {
            //         this.$message.error('图片插入失败')
            //     }
            // },


        },
        async created() {
            this.searchInfo.currentRoleId = this.userInfo.roleId;
            if (this.userInfo.roleId === 5) {
                this.searchInfo.courseStatus = 1;
                this.auditOptions = [
                    {
                        value: '',
                        label: "全部",
                    },
                    {
                        value: 1,
                        label: "审核中",
                    },
                    {
                        value: 3,
                        label: "审核成功",
                    },
                    {
                        value: 2,
                        label: "审核失败",
                    }
                ]
            }
            this.getTableData();
            const res = await getCategory();
            this.options = res.data;
            this.btns = this.$route.meta.btnList
        }
    };
</script>
<style scoped lang="scss">

    .info {
        color: #409EFF;
    }

    .warning {
        color: #E6A23C;
    }

    .success {
        color: #67c23a;
    }

    .danger {
        color: #f56c6c;
    }

    .green {
        color: #67c23a;
    }

    .red {
        color: #f56c6c;
    }

    .button-box {
        // padding: 10px 20px;
        .el-button {
            float: right;
        }
    }

    .el-tag--mini {
        margin-left: 5px;
    }

    .dialogs {
        ::v-deep .el-input-group--append .el-input__inner {
            width: 170px !important;
        }

        ::v-deep .el-dialog__body {
            padding: 15px 20px 10px 20px;
        }

        ::v-deep .el-input__inner {
            width: 225px;
        }

        ::v-deep .el-textarea__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }

        ::v-deep .el-form .el-form-item {
            width: 49%;
            margin: 0;
            margin-bottom: 22px;
        }

        ::v-deep .el-form .pics {
            width: 100%;
            margin-bottom: 22px;
        }

        ::v-deep .el-form .small_pic {
            .el-upload--picture-card {
                height: 80px;
                width: 80px;
                line-height: 80px;
            }
        }

        .pics {
            ::v-deep .el-form-item__content {
                width: calc(100% - 112px);
            }
        }

        .el-form .pics ::v-deep .el-form-item__content .el-textarea__inner {
            width: 100%;
        }

        .item-label {
            ::v-deep .el-form-item__label {
                width: 142px !important;
            }

            ::v-deep .el-input__inner {
                width: 162px;
            }
        }

        ::v-deep strong {
            font-weight: bolder !important;
        }

        ::v-deep em {
            font-style: italic !important;
        }

        ::v-deep strong > em {
            font-weight: bolder !important;
            font-style: italic !important;
        }
    }

    .contents {
        // position: relative;
        ::v-deep .el-form-item__content .el-textarea__inner {
            width: 100%;
        }

        ::v-deep .el-input__inner {
            width: 100%;
        }

        ::v-deep .el-form .el-form-item {
            width: 80%;
            margin: 0;
            margin-bottom: 22px;
        }
    }

    .addBtn {
        text-align: right;
    }

    .con-list {
        position: relative;

        .delBtn {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translate(-50%, -50%);
        }
    }

    .places {
        ::v-deep .el-input input::-webkit-input-placeholder {
            color: #606266;
        }

        ::v-deep .el-input input::-moz-placeholder {
            color: #606266;
        }

        ::v-deep .el-input input:-moz-placeholder {

            color: #606266;
        }

        ::v-deep .el-input input:-ms-input-placeholder {
            color: #606266;
        }
    }

    .header-background {
        position: absolute;
        width: 146px;
        height: 146px;
    }

    .dialogss ::v-deep .el-input--small .el-input__inner {
        width: 180px;
    }


    .dialogss ::v-deep .el-form-item:nth-child(4) {
        width: 4% !important;
    }

</style>
